<script lang="ts">
export default {
  name: "index",
};
</script>
<template>
  <div v-show="ihhhse">
    <div class="bgff pd dfdstewer">
      <n-tabs type="line" v-model:value="tabsValue" @update:value="tabupdate">
        <n-tab name="1"> 涨跌统计</n-tab>
        <n-tab name="2"> 资讯 </n-tab>
        <n-tab name="3">龙虎榜 </n-tab>
        <n-tab name="4">淘金 </n-tab>
        <n-tab name="5">财经资讯 </n-tab>
      </n-tabs>
    </div>

    <n-grid
      x-gap="10"
      :cols="bjs"
      class="h100"
      :class="'dfdgttre' + tabsValue"
      :data-windowSize="windowSize"
    >
      <n-gi class="display-flex czbj fdsfdfsrtaaa">
        <div class="flex-1 pm5 fdsfdfsrtaa">
          <n-card title="涨跌统计" class="h100">
            <div>
              <n-grid x-gap="10" :cols="3" class="h100">
                <n-gi>
                  上涨 <span class="red b"> {{ UpDownData.up }}</span> 家
                  <p class="mt5">
                    <span
                      >下跌
                      <span class="ls b"> {{ UpDownData.down }}</span> 家</span
                    >
                  </p>
                </n-gi>
                <n-gi>
                  涨停 <span class="red b"> {{ UpDownData.t }}</span> 家
                  <p class="mt5">
                    跌停 <span class="ls b"> {{ UpDownData.b }}</span> 家
                  </p>
                </n-gi>
                <n-gi>
                  自然涨停<span class="red b"> {{ UpDownData.tn }}</span> 家
                </n-gi>
              </n-grid>
            </div>
            <div class="ehnnseert">
              <dxEchar :option="echarLister" v-if="lkjdr"></dxEchar>
            </div>
          </n-card>
        </div>
        <div class="flex-1 pt5 fdsfdfsrta">
          <n-card class="h100">
            <template #header>
              <div class="display-flex">
                <div class="flex-1">实时资讯</div>
                <div>
                  <i
                    class="iconfont dx-shuaxin1 ls sz fz"
                    @click="informationFun"
                  ></i>
                </div>
              </div>
            </template>
            <div class="text-box">
              <!-- {{ informationData }}333 Art_Title -->
              <div
                class="information-list sz"
                v-for="(item, idx) in informationData"
                :key="idx"
                @click="
                  hf('details', {
                    Art_Code: item.Art_Code,
                    observetype: 5,
                    ew: item.Art_Title,
                  })
                "
              >
                <p class="z9 fz12">{{ item.Art_Showtime }}</p>
                <p class="fz14 z3">{{ item.Art_Title }}</p>
              </div>

              <div class="reference"></div>
            </div>
          </n-card>
        </div>
      </n-gi>
      <n-gi class="display-flex czbj fdsfdfsrtb">
        <div class="flex-1 pm5">
          <n-card title="振幅偏离" class="h100">
            <n-spin :show="show">
              <n-data-table
                size="small"
                :row-class-name="rowClassName"
                :max-height="windHeight > 1080 ? 400 : 360"
                :columns="columns"
                :data="marketList"
                :single-line="false"
                :row-props="rowProps"
              />
            </n-spin>
          </n-card>
        </div>
        <div class="flex-1 pt5">
          <n-card title="龙虎榜买盘占比60%以上" class="h100">
            <n-spin :show="show">
              <n-data-table
                size="small"
                :row-class-name="rowClassName"
                :max-height="windHeight > 1080 ? 400 : 360"
                :columns="columns"
                :data="AmountOfIncrease"
                :single-line="false"
                :row-props="rowProps"
              />
            </n-spin>
          </n-card>
        </div>
      </n-gi>
      <n-gi class="display-flex czbj fdsfdfsrte">
        <div class="flex-1">
          <n-card title="机构席位" class="h100">
            <n-spin :show="show">
              <n-data-table
                size="small"
                :row-class-name="rowClassName"
                :max-height="windHeight > 1080 ? 400 : 360"
                :columns="columnser"
                :data="AmountOfIncreaseer"
                :single-line="false"
                :row-props="rowProps"
              />
            </n-spin>
          </n-card>
        </div>
        <div class="flex-1 pm5 fdsfdfsrtc">
          <n-card title="淘金" class="">
            <div class="gold-washing-box">
              <n-timeline>
                <n-timeline-item
                  type="info"
                  :time="activity.timestamp"
                  v-for="(activity, index) in QuteScanDataCall11"
                  :key="index"
                >
                  <h3 v-html="activity.content"></h3>
                  <p v-html="activity.des"></p>
                  <p class="red mt10">相关个股</p>
                  <n-grid x-gap="10" :cols="3">
                    <n-gi
                      class="mt10 sz"
                      v-for="(item, idx) in activity.xggg"
                      :key="idx"
                    >
                      <n-card
                        v-setColour="parseFloat(item.zf) >= 0"
                        @click="
                          hf('stockDetails', {
                            code: gulv(item.code),
                            observetype: 7,
                            ew: activity.des,
                          })
                        "
                      >
                        <div>
                          {{ item.name }}<span class="ml10">{{ item.zf }}</span>
                        </div>
                        <div>
                          {{ gulv(item.code) }}
                          <span class="ml10">{{ item.star }}</span>
                        </div>
                      </n-card>
                    </n-gi>
                  </n-grid>
                  <p class="red mt10">相关板块</p>
                  <n-grid x-gap="10" :cols="3">
                    <n-gi
                      class="mt10 sz"
                      v-for="(item, idx) in activity.xgbk"
                      :key="idx"
                    >
                      <n-card v-setColour="parseFloat(item.zf) >= 0">
                        <div>
                          {{ item.name }}
                          <span class="ml10">{{ item.zf }}</span>
                        </div>
                      </n-card>
                    </n-gi>
                  </n-grid>
                </n-timeline-item>
              </n-timeline>
            </div>
          </n-card>
        </div>
        <!-- 
      <div class="flex-1 pt5 fdsfdfsrtd">
        <n-card>
          <template #header>
            <div class="display-flex">
              <div class="flex-1">财经快讯</div>
              <div>
                <i class="iconfont dx-shuaxin1 ls sz fz" @click="getkx"></i>
              </div>
            </div>
          </template>
          <div class="cjkx">
            <n-timeline>
              <n-timeline-item
                type="info"
                :title="activity.title"
                :time="activity.ordertime"
                v-for="(activity, index) in kuaixun"
                :key="index"
              >
                <div
                  class="sz"
                  @click="
                    hf('details', {
                      Art_Code: activity.id,
                      observetype: 6,
                      ew: activity.title,
                    })
                  "
                >
                  {{ activity.digest }}
                </div>
              </n-timeline-item>
            </n-timeline>
          </div>
        </n-card>
      </div> -->
      </n-gi>
    </n-grid>
  </div>
</template>
<script lang='ts' setup>
import { onMounted, ref, h, computed } from "vue";
import { bottomMonitor, dxget, hf } from "../util/index";
import {
  getinformation,
  getkuaixun,
  getQuteScanDataCall11,
} from "../util/dxjsonp";
import { NTimeline, NTimelineItem } from "naive-ui";
import comp from "../components/index";
import dxEchar from "../components/util/dxEchar";
import ecahrData from "../util/ecahrData";
import store from "../store";
const ihhhse = ref(null);
const sdfds  = localStorage.token
if(!sdfds){
  hf('login')
}
let informationData = ref();
let marketList = ref();
let AmountOfIncrease = ref();
let AmountOfIncreaseer = ref();
let echarLister = ref();
let lkjdr = ref(false);
let QuteScanDataCall11 = ref();
const charDada = new ecahrData();
let bjs = ref(3);
let show = ref(false);
let kuaixun = ref();
const windHeight = ref(store.state.windHeight);
let tabsValue = ref("1");
let UpDownData = ref({
  up: "",
  t: "",
  tn: "",
  down: "",
  b: "",
});
let columns = [
  {
    title: "代码",
    key: "f12",
    align: "center",
  },
  {
    title: "简称",
    key: "secName",
    align: "center",
  },
  {
    title: "买卖占比",
    key: "",
    sorter: (row1, row2) => row1.buyPercent - row2.buyPercent,
    align: "center",
    render(row) {
      return h(comp.BuyingAndSellingOf, {
        data: row,
      });
    },
  },
  {
    title: "涨幅",
    key: "f3",
    align: "center",
    sorter: (row1, row2) => row1.f3 - row2.f3,
    render(row) {
      return row.f3 + "%";
    },
  },
  {
    title: "当前价格",
    key: "f2",
    align: "center",
    width: "90",
  },
  {
    title: "操作",
    key: "",
    align: "center",
    width: "80",
    render(row) {
      return h(comp.MoreOperations, {
        obj: [
          {
            label: "添加振幅观察",
            key: "11",
          },
          {
            label: "添加到买盘大于60观察",
            key: "9",
          },
        ],
        rowData: row,
        onOperateFun: () => {
          show.value = false;
        },
        onShowLoad: () => {
          show.value = true;
        },
      });
    },
  },
];

let columnser = [
  {
    title: "代码",
    key: "f12",
    align: "center",
  },
  {
    title: "简称",
    key: "secName",
    align: "center",
  },
  {
    title: "机构席位",
    key: "numbere",
    align: "center",
  },
  {
    title: "买卖占比",
    key: "",
    sorter: (row1, row2) => row1.buyPercent - row2.buyPercent,
    align: "center",
    render(row) {
      return h(comp.BuyingAndSellingOf, {
        data: row,
      });
    },
  },
  {
    title: "涨幅",
    key: "f3",
    align: "center",
    sorter: (row1, row2) => row1.f3 - row2.f3,
    render(row) {
      return row.f3 + "%";
    },
  },
  {
    title: "当前价格",
    key: "f2",
    align: "center",
    width: "90",
  },
  {
    title: "操作",
    key: "",
    align: "center",
    width: "80",
    render(row) {
      return h(comp.MoreOperations, {
        obj: [
          {
            label: "添加振幅观察",
            key: "11",
          },
          {
            label: "添加到买盘大于60观察",
            key: "9",
          },
          {
            label: "机构席位",
            key: "19",
          },
        ],
        rowData: row,
        onOperateFun: () => {
          show.value = false;
        },
        onShowLoad: () => {
          show.value = true;
        },
      });
    },
  },
];

const tabupdate = (num) => {
  tabsValue.value = num;
};
const rowProps = (row, aa) => {
  return {
    style: "cursor: pointer;",
    onClick: (idx) => {
      hf("stockDetails", {
        code: row.f12,
      });
    },
  };
};
const informationFun = async () => {
  informationData.value = await getinformation(1);
};

const getAmplitudeValues = async () => {
  const { data }: any = await dxget("gupiao/getMarketStatisticsData", {
    page: 1,
    rows: 500,
    text: "振幅值",
  });
  marketList.value = data.marketList;
  ihhhse.value = true;
};
const getAmountOfIncrease = async () => {
  const { data }: any = await dxget("gupiao/getMarketStatisticsData", {
    page: 1,
    rows: 500,
    zanbi: 0.6,
  });
  AmountOfIncrease.value = data.marketList;
  ihhhse.value = true;
};
const getAmountOfIncreaseer = async () => {
  const { data }: any = await dxget("gupiao/getMarketStatisticsData", {
    page: 1,
    rows: 500,
    jigou: 2,
  });
  ihhhse.value = true;
  AmountOfIncreaseer.value = data.marketList;
};

const GetUpDownData = async () => {
  const { data }: any = await dxget("dc/GetUpDownData", {});
  UpDownData.value = data;
  let da = data;
  echarLister.value = charDada.GetUpDownData([
    da.t,
    da.rp10,
    da.rp5,
    da.rp01,
    da.r0,
    da.rn01,
    da.rn1,
    da.rn5,
    da.b,
  ]);
  lkjdr.value = true;
};

const initData = async () => {
  informationFun();
  getAmplitudeValues();
  getAmountOfIncrease();
  getAmountOfIncreaseer();
  GetUpDownData();
  QuteScanDataCall11.value = await getQuteScanDataCall11();
  kuaixun.value = await getkuaixun(1);
};
const getkx = async () => {
  kuaixun.value = await getkuaixun(1);
};
initData();
onMounted(() => {
  bottomMonitor("reference", () => {});
});
const rowClassName = (row, index) => {
  if (row.f3 >= 0) {
    return "red";
  }
  return "ls";
};
const windowSize = computed(() => {
  if (store.state.windowSize <= 1600) {
    bjs.value = 2;
  }
  if (store.state.windowSize <= 750) {
    bjs.value = 1;
  }
  return store.state.windowSize;
});

const gulv = (data) => {
  if (data.indexOf("sh") >= 0) {
    return data.split("sh")[1];
  }
  if (data.indexOf("sz") >= 0) {
    return data.split("sz")[1];
  }
};
</script>
<style scoped>
.char-box {
  /* height: 400px;*/
}

.ojdeer {
  background: red;
}

.text-box {
  overflow: auto;
  height: 400px;
}

.information-list {
  border-top: 1px solid #eeeeee;
  padding: 5px 10px;
}

.information-list:hover * {
  color: red;
}

.ehnnseert {
  height: 330px;
}

.gold-washing-box {
  height: 380px;
  overflow: auto;
}

.cjkx {
  height: 400px;
  overflow: auto;
}
</style>
